{extend name="./app/admin/view/main.html" /}
{block name="title"}{$indexTitle} - {__block__}{/block}
{block name="style"}
<style>
    
.user-statistical .nice-box-body {
}

.user-statistical .nice-iconfont {
    font-size: 35px;
    position: absolute;
    right: 0;
    bottom: 0px;
    color: #0AE;
    opacity: 0.2;
}

.user-statistical h3 {
    font-size: 20px;
    color: #0AE;
}

.user-statistical h3 .unit {
    display: none;
    color: #999;
    font-size: 12px;
}

.user-statistical p {
    color: #bababa;
    font-size: 14px;
}
.line {
    line-height: 30px;
}
.copyright-info p {
    line-height: 27px;
}

.table tr{ 
    margin:10px;
 }

.btn-wrapper .el-button+.el-button{ 
    margin-left:0;
   
 }
 .btn-wrapper{
     margin-top: 20px;
 } 

.table thead th {
    vertical-align: bottom;
    border-bottom: 0px solid #dee2e6;
}
.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-left: 1px solid #f3f3f3;
    border-top: 0px;
}
.block{
    margin-top: 20px;
    margin-left: 10%;
}
.nice-box .nice-box-heading {
    color: #354052;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: relative;
    padding: 15px 0px;
    margin-left: 15px;
    margin-right: 15px;
    border-bottom: 1px solid #f3f3f3;
    overflow: hidden;
}

</style>
{/block}

{block name="main"}
<main class="nicemip-container-body">
    <div class="row">   
            <section class="col-lg-8" style="margin:auto;">
               <div class="nice-box">
                <div class="nice-box-heading"><h3 class="left">系统信息</h3></div>
                    <div class="nice-box-body copyright-info">
                        <p><b>系统名称：</b>niceCMS内容管理系统</p>
                        <!--<p><b>授权状态：</b>{if condition='config("niceauthorization")'}{:config("niceauthorization")}{else/}未授权{/if}</p>
                        -->
                        <!-- <p><b>系统版本：</b>{$niceInfo['localCurrentVersion']}</p> -->
                        <!-- <p><b>服务器：</b><input type="checkbox" />普惠型 &nbsp;&nbsp;<input type="checkbox" />智享型</p> -->
                        <p><b>MIP化运行域名：</b>{$mipInfo['mipDomain']}</p>
                        <p><b>原网站域名：</b>{$mipInfo['domain']}</p>
                        <p>&nbsp;</p>
                        <p><el-button type="primary">立即设置</el-button></p>
                    </div>
                </div>

               <!--  <div class="nice-box">
                <div class="nice-box-heading">
                	<p><b>累计文章 ：100W+</b></p>
                	<p><b>一周更新量 ：10W+</b></p>
                </div>
                
                    <div class="nice-box-body copyright-info">
                        <p>地区 : <select> 
                        	<option value="1">广东省</option>
                        	<option value="2">北京市</option>
                        </select></p> -->
                        <!-- <div id="myChart" :style="{width: '300px', height: '300px'}"></div> -->
                        <!-- <div id="main-baidu" :style="{width: '1000px', height: '400px'}"></div> -->
                        <!-- <div id="main-360" :style="{width: '1000px', height: '400px'}"></div> -->
                        <!-- <div id="main-sougou" :style="{width: '1000px', height: '400px'}"></div> -->
                        <!-- <div id="main-360" style="width: 1000px;height:400px;"></div> -->
                        <!-- <div id="main-sougou" style="width: 1000px;height:400px;"></div> -->
                  <!--   </div>
                </div> -->
              
            </section>

            <section class="col-lg-4">
                <div class="nice-box">
                    <div class="nice-box-heading"><h3 class="left">功能介绍</h3></div>
                    <div class="nice-box-body">
                        <ul class="list-unstyled">
                            <li class="list-time line" v-for="item in functionList" ><a :href="item.url" target="_blank" v-html='item.title'></a></li>
                        </ul>
                    </div>
                </div>
            </section>

            <section class="col-lg-12">
                <div class="nice-box">
                     <div class="nice-box-heading">
                        <p><b>今日流量</b></p>
                    </div>
                    <table class="table table-hover"  style="margin-top: 5%;">
                        <thead>
                            <tr>
                              <th>&nbsp;</th>
                              <th>浏览量(PV)</th>
                              <th>访客数(UV)</th>
                              <th>IP数</th>
                              <!-- th>跳出率</th>
                              <th>平均访问时长</th>
                              <th>转化次数</th> -->
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                              <th scope="row">今日</th>

                              <td v-for="item in now_data" v-html='item'></td>
                             <!--  <td>访客数(UV):590</td>
                              <td>IP数:594</td> -->
                              
                            </tr>
                            <tr>
                              <th scope="row">昨天</th>
                               <td v-for="item in yesterday_data" v-html='item'></td>
                             
                            </tr>
                          </tbody>
                    </table>
                    
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                <!-- <div id="main-baidu" :style="{width: '1000px', height: '400px'}"></div> -->
                </div>
            </section>

            <section class="col-lg-6">
                <div class="nice-box">
                     <div class="nice-box-heading">
                            <p><b>趋势图</b></p>
                    </div>

                    <div style="margin-left: 5%;">
                            <section class="btn-wrapper" v-model="radio1">
                                <el-radio-group v-model="radio1" v-on:change="gettrend(radio1,radio2)">
                                  <el-radio-button label="pv">浏览量(PV)</el-radio-button>
                                  <el-radio-button label="uv">访问数(UV)</el-radio-button>
                                </el-radio-group>
                                </el-select>

                                  <div style="float:right;margin-left:5%;margin-right:5%;">
                                    <span class="demonstration">&nbsp;&nbsp;&nbsp;对比&nbsp;&nbsp;&nbsp;</span>
                                    <el-radio v-model="radio2" label="onday"  v-on:change="gettrend(radio1,radio2)">前一天</el-radio>
                                    <el-radio v-model="radio2" label="onweek" v-on:change="gettrend(radio1,radio2)">上一周同期</el-radio>
                                  </div>
                            </section>

                            <div id="maintrend" :style="{width: '670px', height: '400px'}"></div>
                    </div>
                </div>
                
            </section>

             <section class="col-lg-6">
                <div class="nice-box">
                    <div class="nice-box-heading">
                        <p><b>收录统计图</b></p>
                    </div>


                   <template>

                      <div class="block" >
                        <span class="demonstration">&nbsp;&nbsp;&nbsp;时间&nbsp;&nbsp;&nbsp;</span>
                        <el-date-picker
                          v-model="value1"
                          type="datetime"
                          placeholder="选择日期时间"
                          align="right"
                          :picker-options="pickerOptions1"
                          value-format="yyyy-MM-dd"
                          >
                        </el-date-picker>
                        -
                        <el-date-picker
                          v-model="value2"
                          type="datetime"
                          placeholder="选择日期时间"
                          align="right"
                          :picker-options="pickerOptions1"
                          value-format="yyyy-MM-dd"
                          >
                        </el-date-picker>
                        &nbsp;
                        <el-button type="primary" icon="el-icon-search"  v-on:click="getrecord(value1,value2)">查询</el-button>
                      </div>
                      
                    </template>

                     <div id="charstwo" :style="{width: '650px', height: '400px',margin:'auto'}"></div>
                     
                </div>
            </section>
          </div>
</main>
{/block}
    
{block name="javascript"}
{__block__}
<script src="{$domainStatic}/{$assets}/admin/js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    
    new Vue({

        el: '#app',
        data: {
            usersList: [],
            gonggaoList:[],
            functionList: [
            	{
	            	'url':'javascript::',
	            	'title':'ABC入门'
            	},
            	{
            		'url':'javascript::',
            		'title': '平台接入篇'
            	},
            	{
            		'url':'javascript::',
            		'title': '内容运营篇'
            	},
            	{
            		'url':'javascript::',
            		'title': '智能设置篇'
            	},
            	{
            		'url':'javascript::',
            		'title': '模板管理篇'
            	}
            ],
            StatisticsList: [],
            pickerOptions1: {
              shortcuts: [{
                text: '今天',
                onClick(picker) {
                  picker.$emit('pick', new Date());
                }
              }, {
                text: '昨天',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit('pick', date);
                }
              }, {
                text: '一周前',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', date);
                }
              }]
            },
            value1: '',
            value2: '',
            radio1:'pv',
            radio2:'onday',
            value3:'',
            now_data:'',
            yesterday_data:'',


        },

        watch: {
        },
        mounted() {
            // this.getGonggaoList();
            this.getFlowlist();
            this.getrecord();
            this.gettrend();
            // this.getsougou();
            // this.myChartbaidu(this.ceshilist);
        },
        methods: {

            getGonggaoList:function() {
                this.$nicemip.ajax('https://www.mipcms.cn/api/open/gonggaoList',{
                },'global').then(res => {
                	console.log(res.data.gonggaoList);
                    if (res.code == 1) {
                       this.gonggaoList = res.data.gonggaoList;
                    }
                });
            },

            getFlowlist:function() {
                this.$nicemip.ajax('{$domain}/{$itemUrl}admin/ApiAdminStatistics/flow_list',{
                },'global').then(res => {
                    if (res.code == 1) {
                        this.now_data = res.msg.now;
                        this.yesterday_data = res.msg.yesterday;
                        //this.functionList = res.data.functionList;
                       // this.functionList = [12,1,2,3];
                    }
                });
            }, 
            getrecord:function(min_time='',max_time='') {

                this.$nicemip.ajax('{$domain}/{$itemUrl}admin/ApiAdminStatistics/getStatisticsList/min_time/'+min_time+'/max_time/'+max_time,{
                },'global').then(res => {
                    if (res.code == 1) {
                        // this.StatisticsList = res.msg.time;
                        // this.myCharttwo(res.msg.time,res.msg.baidu,res.msg.sanliuning,res.msg.sougou,res.msg.google,'charstwo');
                        this.myCharttwo(res.msg.time,res.msg.baidu,res.msg.sanliuning,res.msg.sougou,'charstwo').reload();

                    }
                });
            }, 

            gettrend:function(type='',Compared_time='') {
                this.$nicemip.ajax('{$domain}/{$itemUrl}admin/ApiAdminStatistics/getTrendlist/type/'+type+'/Compared_time/'+Compared_time,{
                },'global').then(res => {
                    if (res.code == 1) {
                        // this.StatisticsList = res.msg.time;
                        this.myCharttrend(res.msg.flow_time,res.msg.now,res.msg.onday,'maintrend').reload();

                    }
                });
            }, 

            getsougou:function() {
                this.$nicemip.ajax('{$domain}/{$itemUrl}admin/ApiAdminStatistics/getStatisticsList/type_id/3',{
                },'global').then(res => {
                    if (res.code == 1) {
                        // this.StatisticsList = res.msg.time;
                        this.myChartbaidu(res.msg.time,res.msg.word,res.msg.record,'main-sougou');

                    }
                });
            }, 



            myCharttrend:function(time,nowdata,yesterdaydata,NewData){
                let myChart_baidu = echarts.init(document.getElementById(NewData))
                myChart_baidu.setOption({

                    tooltip: {
                        trigger: 'axis'
                    },

                    color:["#87CEFF","#BFEFFF"],
                    grid: {show:'true',borderWidth:'0',shadowColor:'#ccc'},
                    legend: {
                        data:['今天浏览量(PV)','昨天浏览量(PV)'],
                        bottom:'bottom',
                        borderColor:'#BFEFFF',
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis:  {
                        axisLine:{
                            show:false,
                            lineStyle:{
                                color:'#B7B7B7',
                            },
                        },
                        type: 'category',
                        boundaryGap: false,
                        data: time
                    },

                    yAxis: {
                        axisLine:{
                                show:true,    
                                lineStyle:{
                                    color:'#B7B7B7',
                                },
                        },
                        splitLine:{
                            show:true,
                            lineStyle:{color:'#f3f3f3'},
                        },
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },

                    series: [
                        {
                            name:'今天浏览量(PV)',
                            type:'line',
                            data:nowdata,

                            lineStyle:{ 
                                normal:{ 
                                    color:"#87CEFF"
                                }
                            }
                           
                        },
                        {
                            name:'昨天浏览量(PV)',
                            type:'line',
                            data:yesterdaydata,
                             lineStyle:{ 
                                normal:{ 
                                    color:"#BFEFFF"
                                }
                            }
                        },
                        
                    ]

                });

            },

            myCharttwo:function(time,baidu,sanliuning,sougou,NewData){ 
                let myCharttwo = echarts.init(document.getElementById(NewData))

                myCharttwo.setOption({

                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data:['百度总收录','360总收录','搜狗总收录'],
                        borderColor:'#ccc',
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#B7B7B7',
                            },
                        },
                        type: 'category',
                        boundaryGap: false,
                        data: time
                    },
                    yAxis: {
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#B7B7B7',
                            },
                        },
                        splitLine:{
                            show:true,
                            lineStyle:{color:'#f3f3f3'},
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:'百度总收录',
                            type:'line',
                            stack: '总量',
                            data:baidu
                        },
                        {
                            name:'360总收录',
                            type:'line',
                            stack: '总量',
                            data:sanliuning
                        },
                        {
                            name:'搜狗总收录',
                            type:'line',
                            stack: '总量',
                            data:sougou
                        },
                        // {
                        //     name:'google总收录',
                        //     type:'line',
                        //     stack: '总量',
                        //     data:google
                        // }
                    ]

                });

            },

         }

    })
  </script>

{/block}